<template>
  <div class="cp-grid-table" @click="warpClick">
    <div class="topShowWarp" v-if="!tableOnly">
      <!-- 顶部部件区START -->
      <transition :name="topShow?'transright':''">
        <div class="wedgets" v-show="topShow">
          <!-- 表格标题START -->
          <div class="heading">
            <span v-if="title">{{title}}</span>
            <div class="titleHandle">
              <slot name="titleHandle"></slot>
            </div>
          </div>
          <!-- 表格标题END -->
          <!-- 已选过滤条件START -->
          <div class="grid-selected-conditions">
            <span class="tip filter-sort" v-if="queryData.sort" @click="removeFilter('sort')">
              <!-- 排序 -->
              {{queryData.sort.split('|')[1]}}：<i class="highlight">{{queryData.sort.split('|')[0] == 'ASC' ? '升序' : '降序'}}</i><i class="x"></i>
            </span>
            <div class="move-panel" v-show="(queryData.searchList && queryData.searchList.length>0) || (checkedKeys && checkedKeys.length > 0) || queryData.tree.value || (queryData.rangeList && queryData.rangeList.length>0) || (queryData.timeList && queryData.timeList.length>0)" >
              <span class="m-l" @click="move(0)"></span>
              <div class="tips">
                <ul id="move-list">
                  <!-- 搜索 -->
                  <li v-for="(item,index) in queryData.searchList" :key = "index" @click="removeFilter('search',item.name)">
                    <span class="tip" :title="item.displayName">{{item.displayName}}：<i class="highlight" :title="item.value">{{item.value}}</i><i class="x"></i></span>
                  </li>
                  <!-- 区间 -->
                  <li v-for="(item,index) in queryData.rangeList" :key = "index" @click="removeFilter('range',item.name)">
                    <span class="tip" :title="item.displayName">{{item.displayName}}：<i class="highlight" :title="getRangTitle(item[item.name+'Begin'],item[item.name+'End'])">{{item[item.name+'Begin']?item[item.name+'Begin']:0}}{{(item[item.name+'End'] || item[item.name+'End']==0)?'~'+item[item.name+'End']:'到~'}}</i><i class="x"></i></span>
                  </li>
                  <!-- 日期 -->
                  <li v-for="(item,index) in queryData.timeList" :key = "index" @click="removeFilter('timepicker',item.name)">
                    <span class="tip" :title="item.displayName">{{item.displayName}}：<i class="highlight" :title="item[item.name+'Begin']+'至'+item[item.name+'End']">{{item[item.name+'Begin']}}至{{item[item.name+'End']}}</i><i class="x"></i></span>
                  </li>
                  <!-- 单选/多选 -->
                  <li v-if="queryData.checked[key] && queryData.checked[key].split('|')[1]" v-for="(key,index) in checkedKeys" @click="removeFilter('checked', key)" :key="index">
                    <span class="tip" :title="queryData.checked[key].split('|')[2]">{{queryData.checked[key].split('|')[2]}}：<i class="highlight" :title="queryData.checked[key].split('|')[1]">{{queryData.checked[key].split('|')[1]}}</i><i class="x"></i></span>
                  </li>
                  <!-- 组织结构 caseBelong 名称暂时固定！ todo-->
                  <li v-if="queryData.tree.value" @click="removeFilter('tree', 'caseBelong')">
                    <span class="tip" :title="queryData.tree.displayName">{{queryData.tree.displayName}}：<i class="highlight" :title="queryData.tree.name">{{queryData.tree.name}}</i><i class="x"></i></span>
                  </li>
                </ul>
              </div>
              <span class="m-r" @click="move(1)"></span>
               <!-- v-show="checkedKeys.length+(queryData.search.value?1:0) > 3" -->
            </div>
          </div>
          <!-- 已选过滤条件END -->
          <!-- 右侧按钮插槽START -->
          <div class="grid-wedget-button">
            <slot name="grid-wedget-button"></slot>
          </div>
          <!-- 右侧按钮插槽END -->
        </div>
      </transition>
      <!-- 顶部部件区END -->
      <!-- 选择复选框/单选框之后，操作面板START -->
      <transition :name="topShow2?'transleft':''">
        <div class="operation" v-show="topShow2">
          <ul>
            <li class="text">已选<span class="highlight">{{checkedItemCount}}</span>个</li>
            <!-- <li class="op-btn op-btn-edit" v-if="checkable.split('|').indexOf('edit') != -1">编辑</li> -->
            <li class="op-btn op-btn-delete" v-if="/delete:/.test(checkable)" @click="deleteRow">删除</li>
            <!-- 左侧按钮插槽START -->
            <div class="grid-wedget-left-button">
              <slot name="grid-wedget-left-button"></slot>
            </div>
            <!-- 左侧按钮插槽END -->
          </ul>
          <span class="op-btn op-btn-cancel" @click="unCheckAll"></span>
        </div>
      </transition>
      <!-- 选择复选框/单选框之后，操作面板END -->
    </div>
    <!-- 二级的筛选条件插槽START -->
    <div class="grid-wedget-operation" v-if="operation">
      <slot name="grid-wedget-operation"></slot>
    </div>
    <!-- 表格START -->
    <div class="grid-table" :class="operation?'grid-table-hasOperation':''" :style="tableBottom">
      <div class="grid-table-container" id="grid-table-container" :style="tableMinWidth">
        <div class="grid-thead" v-show="thead && thead.length>0">
          <Row type="flex" justify="space-around">
            <div class="checkboxWarp">
              <i v-if="checkable || hasCheckbox" :class="[checkable || hasCheckbox ? 'checkbox' : '', itemAllChecked ? 'checkbox-checked' : '', hasItemChecked && !itemAllChecked ? 'checkbox-part-checked' : '']" @click="checkAll"></i>
              <span class="index">(序号)</span>
            </div>
            <Col span="1" v-for="(th, th_index) in thead" :key="th_index" v-if="th.visible" :name="th.name" class="grid-flex-col">
            <div class="grid-table-th">
              <span :class="filterable && !getFilterType(th)['empty'] && th.searchable?'column-title':'column-title noSearchable'" :title="th.displayName">{{th.displayName}}</span>
              <!-- 高级筛选  && th.searchable -->
              <div v-if="filterable && !getFilterType(th)['empty'] && th.searchable" class="grid-filter-container" @mouseover="showfilter(th)" @mouseleave="hidefilter(th)">
                <grid-filter ref="filters" :classes="[th.showFilter ? 'active' : '']" :options="getFilterType(th)" :queryData="queryData" v-on:filter="filter" :seachMaxlength="seachMaxlength"></grid-filter>
              </div>
            </div>
            </Col>
            <!-- 操作 -->
            <div class="checkboxWarp processOperation" v-if="processOperation">
              <span class="index">流程操作</span>
            </div>
						<div class="checkboxWarp processOperation" style="padding-left: 40px;" v-if="processOperationes">
							<span class="index">流程操作</span>
						</div>
            <div class="checkboxWarp processOperation" v-if="BonusOperation">
              <span class="index">操作</span>
             </div>
            <div class="checkboxWarp processOperation" v-if="operationcaozuo">
              <span class="index">操作</span>
            </div>

           
						<div class="checkboxWarp processOperation" v-if="appendixOperation">
							<span class="index">操作</span>
						</div>

            <div class="checkboxWarp processOperation" v-if="isLeaveMessage">
              <span class="index">操作</span>
            </div>
            <!-- 设置按钮 -->
            <Col span="1" v-if="setting" class="last-child">
            <i class="setting" @click="showSetting = !showSetting"></i>
            </Col>
            <div class="w10"></div>
          </Row>
        </div>
        <div class="grid-tdata" v-if="tdata.length > 0" :class="count && countShow?'b89':''">
          <div class="grid-row" v-for="(td, index) in tdata" :key="index" @click="clickRow($event, td, index)" :class="{ 'active' : rowClickedIndex === index, 'grid-row_nocursor': nocursor ==true }">
            <Row type="flex" justify="space-around">
              <div class="checkboxWarp">
                <i v-if="checkable || hasCheckbox" :class="[checkable || hasCheckbox ? 'checkbox' : '', td.checked ? 'checkbox-checked' : '']" @click="checkItem($event, td)"></i>
                <span class="index" v-if="isPager">{{pagerData.startRow + index}}</span>
                <span class="index" v-else>{{1 + index}}</span>
              </div>
              <Col span="1" v-for="(th, index_th) in thead" :key="index_th" v-if="th.visible" class="grid-flex-col" :class="th.click && clickTD && getTdString(td[th.name], th.name)!==0?'grid-flex-col_hover':''">
                <div class="grid-flex-col_div" @click="th.click && clickTD && getTdString(td[th.name], th.name)!==0?handleTDClick($event, td,th):''">
                	<span v-if="th.name === 'bonusState'" :title="td.bonusState=='0' ? '未提交':td.bonusState=='1' ?  '审核中' : td.bonusState=='2' ? '已审核':'已驳回'">{{ td.bonusState=='0' ? '未提交':td.bonusState=='1' ?  '审核中' : td.bonusState=='2' ? '已审核':'已驳回'}}</span>
                  <span v-if="typeof td[th.name] === 'string'" :title="th?getTdString(td[th.name], th.name):''">{{ th?getTdString(td[th.name], th.name):'' }}</span>
                  <span v-if="typeof td[th.name] === 'number'&&th.name!=='bonusState'" :title="th?getTdNumber(td[th.name], th.name):''">{{ th?getTdNumber(td[th.name], th.name):'' }}</span>
                  <span v-if="Array.isArray(td[th.name])" :title="th?getTdArray(td[th.name], th.name):''">{{ th?getTdArray(td[th.name], th.name):'' }}</span>
                  <span v-if="typeof td[th.name] === 'object'" :title="th?getTdObject(td[th.name],th.dataType):''">{{  th?getTdObject(td[th.name],th.dataType):'' }}</span>
                 
                  <span v-if="userIncon">
                       <!-- <span  v-if="th.tipMessage && td.tipMessage"> -->
                       <span  v-if="th.tipMessage&&td.transferStatus==1">
                          <Tooltip content="该人员当前正在调离中" placement="top" v-if="th.tipMessage">
                          <img src="../../assets/images/stall_icon.png" class="userIcon">
                        </Tooltip>
                      </span>
                      <span  v-if="th.tipMessage&&td.transferStatus==5">
                          <Tooltip content="该人员当前正在支援中" placement="top" v-if="th.tipMessage">
                          <img src="../../assets/images/stall_icon_2.png" class="userIcon">
                        </Tooltip>
                      </span>
                  </span>
                  <Tooltip :content="td.tipMessage" placement="top" v-if="th.tipMessage && td.tipMessage">
                    <i class="tip_icon" v-if="th.tipMessage && td.tipMessage"></i>
                  </Tooltip>
                </div>
              </Col>
              <!-- 操作 -->
              <div class="checkboxWarp processOperation" v-if="processOperation">
                <span class="index step" @click="operationOne($event, td, index)" v-if="productIntention!=2">打回</span>
                <span class="index step" @click="operationTwo($event, td, index)" v-if="hasNext">下一步</span>
								<span class="index step" @click="operationThree($event, td, index)" v-if="hasPromess">流程信息</span>
              </div>
							<div class="checkboxWarp processOperation" v-if="processOperationes">
								<span class="index step" @click="operationOne($event, td, index)" v-if="productIntention!=2">打回</span>
								<span class="index step" @click="operationThree($event, td, index)" v-if="hasPromess">流程信息</span>
							</div>

              <div class="checkboxWarp processOperation" v-if="operationcaozuo">
                  <span v-if="productIntention!=2">
                      <span class="index step" @click="operationOne($event, td, index)" >通过</span>
                      <span class="index step" @click="operationThree($event, td, index)" >拒绝</span>
                  </span>
                  <span v-else>
                    已通过
                  </span>
                  
                  
              </div>


              <div class="checkboxWarp processOperation" v-if="BonusOperation">
                <span class="index step" @click="changeName($event, td, index)">更名</span>
                <span class="index step" v-show='td.bonusState==0' @click="changeSubmit($event, td, index)">提交</span>
                <span class="index step" v-show='td.bonusState==1' @click="withdraw($event, td, index)">撤回</span>
                <span class="index step" @click="processInfo($event, td, index)">流程信息</span>
								<span class="index step" v-show='td.bonusState==0' @click="deletecurRow($event, td, index)">删除</span>

              </div>
							<div class="checkboxWarp processOperation" v-if="appendixOperation">
								<a class="index step" @click="checkdetail($event, td, index)">查看上传明细</a>
							</div>
              <div class="checkboxWarp isLeaveMessage processOperation" v-if="isLeaveMessage">
                  <span @click="backurl($event, td, index)">
                     奖金发放设置 
                  </span>
              </div>
              <Col span="1" v-if="setting">1</Col>

              


            </Row>
          </div>
        </div>
        <!-- 合计START -->
        <div class="grid-tCout" v-if="count && countShow">
          <div class="grid-row">
            <Row type="flex" justify="space-around">
              <div class="checkboxWarp"></div>
              <Col span="1" v-for="(th, th_index) in thead" :key="th_index" class="grid-flex-col" v-if="th_index==0">{{countTitle}}</Col>
              <Col span="1" v-for="(th, th_index) in thead" :key="th_index" class="grid-flex-col" v-if="th_index>0 && th.visible">
                <span class="col-span" v-if="th.gridTableCount || th.gridTableCount == 0" :title="th.gridTableCount">
                  <i v-if="countFormart == 'moneyFormart'">{{th.gridTableCount | moneyFormart}}</i>
                  <i v-if="countFormart == 'moneyFormart_toFixed4'">{{th.gridTableCount | moneyFormart_toFixed4}}</i>
                </span>
                <span v-else>--</span>
              </Col>
              <Col span="1" v-if="setting"></Col>
              <div class="w10"></div>
            </Row>
          </div>
        </div>
        <!-- 合计END -->
        <div v-if="!loading && (tdata && tdata.length < 1 )" class="gridTablenodata">
          <div class="alert">
            <i></i>
            {{nodata_child}}
          </div>
        </div> 
      </div>
    </div>
    <!-- 分页START -->
    <div class="grid-tfoot" v-if="isPager">
      <Row>
        <div class="clear"></div>
        <div class="totalCount">当前第 {{pagerData.startRow}} 到第 {{pagerData.endRow}} 条，共 {{pagerData.total}} 条</div>
        <Page ref="refPager" :total="pagerData.total" :pageSize="pagerData.rows" class="pager" show-sizer :pageSizeOpts="pagerData.rowOptions" placement="top" show-elevator @on-change="pageChange" @on-page-size-change="rowChange"></Page>
      </Row>
    </div>
    <!-- 分页END -->
    <!-- 表格END -->
    <!-- 加载中START -->
    <div v-if="loading" class="loadingwarp">
      <div class="gridTableloading">
        <div class="gridTableDemo-spin-col">
          <Spin fix>
            <Icon type="load-c" size=22 class="demo-spin-icon-load"></Icon>
            <div>正在加载</div>
          </Spin>
        </div>
      </div>
    </div>
    <!-- 加载中END -->
    <!-- 表格设置START -->
      <Modal 
        title="编辑显示字段" 
        v-model="showSetting" 
        :mask-closable="false" 
        width="730"
        @on-ok="saveSetting" 
        @on-cancel="cancelSetting" 
        data-test="modal_grid-setting">
        <div class="grid-setting">
          <div class="inner">
            <div class="bd">
              <div class="list-left">
                <h3>隐藏选项</h3>
                <div class="items" @dragover="dragover" @drop="drop" id="hiddenList">
                  <ul>
                    <li 
                      v-for="(item, index) in hiddenList" 
                      :key="index" 
                      @click="check(item)" 
                      @dragstart="dragstart" 
                      dragend="dragend" 
                      draggable="true" 
                      :transdata="'hiddenList|' + index">
                      <i class="checkbox" :class="{ 'checkbox-checked': item.checked }"></i>
                      <label>{{item.displayName}}</label>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="mid">
                <span :class="hasCheck_visibleList?'to-l to-hover':'to-l'" @click="transfer(1)"></span>
                <span :class="hasCheck_hiddenList?'to-r to-hover':'to-r'" @click="transfer(2)"></span>
              </div>
              <div class="list-right">
                <h3>显示选项</h3>
                <div class="items" @dragover="dragover" @drop="drop" id="visibleList">
                  <ul>
                    <li 
                      v-for="(item, index) in visibleList" 
                      :key="index" 
                      @click="check(item)" 
                      @dragstart="dragstart" 
                      dragend="dragend" 
                      draggable="true" 
                      :transdata="'visibleList|' + index">
                      <i class="checkbox" :class="{ 'checkbox-checked': item.checked }"></i>
                      <label>{{item.displayName}}</label>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="sort">
                <span class="up" @click="sort(1)"></span>
                <span class="down" @click="sort(2)"></span>
              </div>
            </div>
          </div>
        </div>
      </Modal>
    <!-- 表格设置END -->
  </div>
</template>
<script>
import Vue from 'vue'

import Rest from '@/rest'
import Helper from '@/common/helper'
import gridFilter from './grid_filter'
//import Bus from '@/store/bus'
//import Api from '@/api'

export default {
  name: 'gridTable',
  data() {
    return {
      nodata_child: '',
      topShow:true,// 多选操作动画用
      topShow2:false,// 多选操作动画用
      hasCheck_hiddenList: false, //隐藏选项是否有选中项
      hasCheck_visibleList: false, //显示选项是否有选中项
      hasItemChecked: false, // 是否部分选中
      itemAllChecked: false, // 是否全选
      showOperation: false, // 是否显示表格操作栏
      checkedItemCount: 0, // 选中个数
      thead: [], // 表格头部
      tdata: [], // 表格数据
      visibleList: [], // 显示选项列表
      hiddenList: [], // 隐藏选项列表
      showFilter: false, // 是否显示高级筛选
      showSetting: false, // 是否显示表格设置弹窗
      isCheckAll: false, // 表格行: 是否已全选
      dropTargetIndex: '', // drop的目标索引信息，可以根据这个信息知道拖动释放在什么位置上
      rowClickedIndex: '', // 被选中的行索引
      theadSource: 'api/v1/tb_query_defs/',
      countList: [],
      loading: false,
      pagerData: {
        page: 1, // 第几页
        rows: 30, // 每页30条
        startRow: 0, // 起始条数
        endRow: 0, // 结束条数
        total: 0, // 总数据量
        lastPage: false, // 是否已经是最后一页
        rowOptions: [10, 15, 30, 50] // 每页条数切换的配置
      },
      queryData: { // 高级搜索查询数据
        sort: '',
        search: {
          value: '',
          name: '',
          displayName: ''
        },
        checked: {},
        tree: {
          key: 'orgIds',
          value: '',
          name: '',
          displayName: ''
        },
        range: {
          name: '',
          displayName: '',
          rangeBegin: 0,
          rangeEnd: 0
        },
        timepicker: {
          name: '',
          displayName: '',
          timeStart: 0,
          timeEnd: 0
        },
        searchList:[],
        timeList:[],
        rangeList:[]
      },
      checkedKeys: [], // 高级搜索选中的keys列表，即queryData.checked对象的keys列表
      dicFields: [], // 记录字典字段
      dicObjs: [], // 记录字典数据对象
      nodataBackup: '',
    }
  },
  computed: {
    tableMinWidth: function() {
      var thlen = this.thead.length;
      var width = 0;
      var minwidth = 900;
      for (var i = 0; i < thlen; i++) {
        if (this.thead[i].visible == true) {
          // 根据数据类型定义宽度
          // 数据类型：1，字符串；2，整型；3，浮点；4，逻辑；5，年；
          // 6，月；7，日期；8，时间；9，日期时间；10，枚举；11，组织机构; 12，房源信息
          switch (this.thead[i].dataType) {
            case 1:
            case 12:
            case 11:
              width = width + 240;
              break;
            case 2:
            case 3:
            case 4:
            case 5:
            case 6:
            case 7:
              width = width + 170;
              break;
            case 8:
            case 9:
              width = width + 150;
              break;
            case 10:
              width = width + 130;
              break;
          }
        }
      }
      if(this.filterable){
        width = width > minwidth ? width : minwidth;
      }else{ // 适合弹框类
        width = 600;
      }
      return 'min-width:' + width + 'px';
    },
    tableBottom: function(){
      if(this.isPager){
        return 'bottom:78px';
      }else{
        return 'bottom:20px';
      }
    }
  },
  methods: {
    // 阻止冒泡
    warpClick() {
    },
    showfilter(th) {
      var that = this;
      clearTimeout(th.timeout);
      th.timeout = setTimeout(()=>{
        th.showFilter = true;
      },50)
    },
    hidefilter(th) {
      var that = this;
      clearTimeout(th.timeout);
      th.timeout = setTimeout(()=>{
        th.showFilter = false;
      },100);
    },
    // 表头数据初始化
    init() {
      var _this = this
      var url = '';
      _this.thead = []; // 表格头部
      _this.tdata = []; // 表格数据
      _this.checkedKeys = [];
      _this.nodataBackup = _this.nodata;
      _this.nodata_child = _this.nodata;
      _this.closeFilter();
      if (this.checkable) {
        // 序列化checkable:
        // delete:api/v1/abc?a=b -> { delete: { api: 'api/v1/abc', query: 'a', alias: 'b' } }
        // a为api中的查询字段，b为tdata中的查询字段
        var o = {}
        var urls = this.checkable.split(',')
        urls.forEach(function(url) {
          var s = url.split(':')
          o[s[0]] = {}
          if (s[1].indexOf('?') !== -1) {
            var x = s[1].split('?')
            o[s[0]].api = x[0]
            if (x[1]) {
              var y = x[1].split('=')
              o[s[0]].query = y[0]
              o[s[0]].alias = y[1]
            } else {
              o[s[0]].query = 'id'
              o[s[0]].alias = 'id'
            }
          } else {
            o[s[0]].api = s[1]
          }
        })
        this.checkableMap = o
      }
      if (!this.total && !this.defName) {
        Helper.error('表格渲染错误：缺乏defName参数')
      } else {
        this.loading = true;
        if (this.total) {
          url = this.total;
        } else if (this.defName) {
          url = this.theadSource + this.defName;
        }
        Rest.get(url).done(function(res) {
          if (Helper.isSuccess(res)) {
            // 初始化表头配置列表
            _this.visibleList = []
            _this.hiddenList = []
            if (res.data.properties) {
              // 父级修改表头字段
              var changeTheadkeyList = Object.keys(_this.changeThead) || [];
              if(changeTheadkeyList && changeTheadkeyList.length > 0){
                res.data.properties.forEach((o)=>{
                  if(changeTheadkeyList.indexOf(o.name)>-1){
                    var changeItem = _this.changeThead[o.name];
                    for(var i in changeItem){
                      o[i] = changeItem[i];                 
                    }
                  }
                })
              }
              // 截取掉hide为true的表头数据
              var showlist = [];
              res.data.properties.forEach((o)=>{
                if(!o.hide){showlist.push(o)}
              })
              // 表头排序
              showlist = showlist.sort(function(a, b) {
                return a.displayOrder - b.displayOrder
              })
              showlist.forEach(function(item) {
                // 默认不显示高级筛选
                item.showFilter = false
                // 初始化隐藏/显示选项列表
                var listName = item.visible ? 'visibleList' : 'hiddenList'
                _this[listName].push({
                  name: item.name,
                  displayName: item.displayName,
                  checked: false,
                  id: item.id
                })
                _this.getFilterType(item);
              })
           
              _this.thead = showlist;
              
            }
            // 获取tdata
            if(_this.isPager){
              _this.$refs.refPager.changePage(1)
            }
            _this.getList(res)
          } else {
            Helper.toast(res.status.msg)
          }
        })
      }
    },
    // 过滤条件移动
    move(type) {
      var $target = $('#move-list')
      var $parent = $target.parent()
      var $children = $target.children()
      var dist = parseInt($target.css('margin-left'), 10) || 0
      const PER = 200 // 移动距离
      const MAX_DIST = 0 // 最大距离
      var MIN_DIST = 0 // 最小距离
      for (var i = 0, len = $children.length; i < len; i++) {
        MIN_DIST += $children.eq(i)[0].offsetWidth + 8
      }
      // 过滤条件过少，不移动
      if (MIN_DIST < $parent[0].offsetWidth) return false
      MIN_DIST = $parent[0].offsetWidth - MIN_DIST
      dist = !!type ? dist - PER : dist + PER
      if (dist > MAX_DIST) dist = MAX_DIST
      if (dist < MIN_DIST) dist = MIN_DIST
      $target.stop(true).animate({
        marginLeft: dist + 'px'
      })
    },
    // 初始表头高级筛选数据
    getFilterType(thData) {
      var _this = this
      var o = {}
      o.name = thData.name
      o.displayName = thData.displayName
        // 排序
        // o.sort = true
      if (thData.sortable) {
        o.sort = true
      }
      // 搜索
      if (thData.dataType == 1 || thData.dataType == 2) {
        // todo 根据数据类型定义高级搜索类型 
        // 数据类型：1，字符串；2，整型；3，浮点；4，逻辑；5，年；6，月；7，日期；8，时间；9，日期时间；10，枚举；11，组织机构; 12，房源信息
        o.search = ''
        o.searchType = thData.dataType;
      }
      if (thData.dataType == 3) {
        // todo 根据数据类型定义高级搜索类型 
        // 数据类型：1，字符串；2，整型；3，浮点；4，逻辑；5，年；6，月；7，日期；8，时间；9，日期时间；10，枚举；11，组织机构; 12，房源信息
        o.range = ''
        o.rangeBegin = 0
        o.rangeEnd = 0
      }
      if (thData.dataType == 7 ||  thData.dataType == 9) {
        // todo 根据数据类型定义高级搜索类型 
        // 数据类型：1，字符串；2，整型；3，浮点；4，逻辑；5，年；6，月；7，日期；8，时间；9，日期时间；10，枚举；11，组织机构; 12，房源信息
        o.timepicker = ''
        o.timeStart = ''  
        o.timeEnd = ''
      }
      // 复选
      if (thData.acceptedMultiValues && (thData.dataRetrieveUrl || thData.enumPairs)) {
        o.checkbox = {}
        o.checkbox.retrieveUrl = thData.dataRetrieveUrl || ''
        o.checkbox.enumPairs = thData.enumPairs || [];
        // 记录字典字段
        if (_this.dicFields.indexOf(thData.name) < 0) {
          _this.dicFields.push(thData.name);

          if (thData.enumPairs) {
            _this.dicObjs[thData.name] = thData.enumPairs
          } else if (o.checkbox.retrieveUrl) {
            var parms = {};
            _this.theadparms.map(item=>{
              if(item.name == o.name){
                parms = item.parms;
              }
            })
            Rest.get(o.checkbox.retrieveUrl,parms).done(function(res) {
              if (Helper.isSuccess(res)) {
                o.checkbox.enumPairs = res.data
                _this.setDicObj(o);
              } else {
                _this.$message.warning(res.status.msg)
              }
            })
          }
        }
      }
      // 单选
      if (!thData.acceptedMultiValues && (thData.dataRetrieveUrl || thData.enumPairs)) {
        o.radio = {}
        o.radio.retrieveUrl = thData.dataRetrieveUrl || ''
        o.radio.enumPairs = thData.enumPairs || [];
        // 记录字典字段
        if (_this.dicFields.indexOf(thData.name) < 0) {
          _this.dicFields.push(thData.name);
          if (thData.enumPairs) {
            _this.dicObjs[thData.name] = thData.enumPairs
          } else if (o.radio.retrieveUrl) {
            var parms = {};
            _this.theadparms.map(item=>{
              if(item.name == o.name){
                parms = item.parms;
              }
            })
            Rest.get(o.radio.retrieveUrl,parms).done(function(res) {
              if (Helper.isSuccess(res)) {
                o.radio.enumPairs = res.data
                _this.setDicObj(o);
              } else {
                _this.$message.warning(res.status.msg)
              }
            })
          }
        }
      }
      // 组织结构树 todo 定义组织机构
      if (thData.dataType == 11) {
        o.tree = {}
        if (thData.retrieveUrl) { // 支持扩展树-取数接口
          o.tree.dataRetrieveUrl = thData.dataRetrieveUrl;
        }
      }
      var parms = {};
      _this.theadparms.map(item=>{
        if(item.name == o.name){
          parms = item.parms;
        }
      })
      o.parms = parms;
      o.empty = o.sort === undefined && 
        o.search === undefined && 
        o.checkbox === undefined && 
        o.radio === undefined && 
        o.tree === undefined && 
        o.range === undefined && 
        o.timepicker === undefined
      return o
    },
    removeList() {
      var _this = this
      this.pagerData = {
        page: 1, // 第几页
        rows: 15, // 每页10条
        startRow: 0, // 起始条数
        endRow: 0, // 结束条数
        total: 0, // 总数据量
        lastPage: false, // 是否已经是最后一页
        rowOptions: [10, 15, 20] // 每页条数切换的配置
      },
      _this.thead = [];
      _this.tdata = [];
    },
    getList(handler) {
      var _this = this
      var queryData = this.queryData
      var tdataSource = this.tdataSource;
      if(this.isPager){
        var query = {
          page: this.pagerData.page,
          rows: this.pagerData.rows,
        };
      }else{
        var query = {};
      }
      _this.rowClickedIndex = '';
      _this.loading = true;
      // 排序
      if (queryData.sort) {
        var sortInfo = queryData.sort.split('|')
        query.sortIndex = sortInfo[2];
        query.sortType = sortInfo[0];
      }
      // 搜索todo search应该为数组，以支持多个名称搜索类型
      if (queryData.searchList && queryData.searchList.length>0) {
        var len = queryData.searchList.length;
        for(var i = 0;i<len;i++){
          if(_this.dataKey == "data"){
            query[queryData.searchList[i].name] = queryData.searchList[i].value;
          }else{
            if(_this.isEnocde){
              query[queryData.searchList[i].name] = escape(encodeURIComponent(queryData.searchList[i].value));
            }else{
              query[queryData.searchList[i].name] = queryData.searchList[i].value;
            }
          }
          // query[queryData.searchList[i].name] = escape(encodeURIComponent(queryData.searchList[i].value))
          // query[queryData.searchList[i].name] = queryData.searchList[i].value;
        }
      }
      // 区间搜索
      if (queryData.rangeList && queryData.rangeList.length>0) {
        var len = queryData.rangeList.length;
        for(var i = 0;i<len;i++){
          if(queryData.rangeList[i][queryData.rangeList[i].name+"Begin"] || queryData.rangeList[i][queryData.rangeList[i].name+"Begin"] == 0){
            query[queryData.rangeList[i].name+"Begin"] = queryData.rangeList[i][queryData.rangeList[i].name+"Begin"]
          }
          if(queryData.rangeList[i][queryData.rangeList[i].name+"End"] || queryData.rangeList[i][queryData.rangeList[i].name+"End"] == 0){
            query[queryData.rangeList[i].name+"End"] = queryData.rangeList[i][queryData.rangeList[i].name+"End"]
          }
        }
      }
      // 日期
      if (queryData.timeList && queryData.timeList.length>0) {
        var len = queryData.timeList.length;
        for(var i = 0;i<len;i++){
          if(queryData.timeList[i][queryData.timeList[i].name+"Begin"]){
            query[queryData.timeList[i].name+"Begin"] = queryData.timeList[i][queryData.timeList[i].name+"Begin"]
          }
          if(queryData.timeList[i][queryData.timeList[i].name+"End"]){
            query[queryData.timeList[i].name+"End"] = queryData.timeList[i][queryData.timeList[i].name+"End"]
          }
        }
      }
      // 单选/复选
      if (Object.keys(queryData.checked).length > 0) {
        for (var key in queryData.checked) {
          query[key] = queryData.checked[key].split('|')[0]
        }
      }
      // 树-组织结构
      if (queryData.tree.value) {
        query[queryData.tree.key] = queryData.tree.value
      }
      if (tdataSource) {
        // 获取表数据
        Rest.get(tdataSource, query).done(function(res) {
          if (Helper.isSuccess(res)) {
            setTimeout(() => {
              _this.loading = false;
            }, 500)
            // 最后注释去掉
            if(_this.tdataKey){
              res.data = res.data.page || {};
            }
            if(_this.isPager){
              _this.pagerData.total = res.data.totalCount || 0;
              _this.pagerData.lastPage = res.data.lastPage || 0;
              _this.pagerData.startRow = res.data.startRow || 0;
              _this.pagerData.endRow = res.data.endRow || 0;
            }
            //最后注释去掉
            if(_this.dataKey == "data"){
              res.data.items = res.data;
            }
            if(_this.isChangeData){
              _this.$emit("changeData", res.data.items);
            }
              // 表格行，默认不选中
            if (_this.checkable && res.data.items.length > 0) {
              res.data.items.forEach(function(item) {
                item.checked = false
              })
            }
            _this.tdata = res.data.items || [];
            
            var formartlist = [];
            _this.thead.forEach((o)=>{
              //var queryConditionConstraint = eval('(' + o.queryConditionConstraint + ')');
              var queryConditionConstraint = eval(o.queryConditionConstraint);
              if(queryConditionConstraint && queryConditionConstraint.formart){
                var obj = {
                  "name": o.name,
                  "formart": queryConditionConstraint.formart
                }
                formartlist.push(obj);
              }
            })
            var formarNameList = [];
            formartlist.forEach((o)=>{
              formarNameList.push(o.name);
            })
            _this.tdata.forEach((o)=>{
              for(var i in o){
                if(formarNameList.indexOf(i)>-1){
                  formartlist.forEach((f)=>{
                    if(f.name == i){
                      if(f.formart == 'moneyFormart_toFixed4'){
                        o[i] = Helper.moneyFormart_toFixed4(o[i]);
                      }else if(f.formart == 'moneyFormart'){
                        o[i] = Helper.moneyFormart(o[i]);
                      }
                    }
                  });
                }
              }
            })
            _this.$emit("listLoadingCallback",_this.tdata,query,_this.pagerData);
            if (typeof handler === 'function') handler();
          } else {
            setTimeout(() => {
              _this.loading = false;
            }, 500)
            _this.$Message.error(res.status.msg);
          }
          _this.unCheckAll();
          _this.getListCount()
        })
      }
    },
    // 获取合计
    getListCount() {
      var _this = this
      if (_this.count != '' && _this.count != null) {
        var queryData = _this.queryData
        var query = {};
        // 搜索todo search应该为数组，以支持多个名称搜索类型
        if (queryData.searchList && queryData.searchList.length>0) {
          var len = queryData.searchList.length;
          for(var i = 0;i<len;i++){
            query[queryData.searchList[i].name] = escape(encodeURIComponent(queryData.searchList[i].value))
             // query[queryData.searchList[i].name] = query[queryData.searchList[i].name].replace(/(^\s*)|(\s*$)/g, ""); 
            // query[queryData.searchList[i].name] = queryData.searchList[i].value;
          }
        }
        // 区间搜索
        if (queryData.rangeList && queryData.rangeList.length>0) {
          var len = queryData.rangeList.length;
          for(var i = 0;i<len;i++){
            if(queryData.rangeList[i][queryData.rangeList[i].name+"Begin"] || queryData.rangeList[i][queryData.rangeList[i].name+"Begin"] == 0){
              query[queryData.rangeList[i].name+"Begin"] = queryData.rangeList[i][queryData.rangeList[i].name+"Begin"]
            }
            if(queryData.rangeList[i][queryData.rangeList[i].name+"End"] || queryData.rangeList[i][queryData.rangeList[i].name+"End"] == 0){
              query[queryData.rangeList[i].name+"End"] = queryData.rangeList[i][queryData.rangeList[i].name+"End"]
            }
          }
        }
        // 日期
        if (queryData.timeList && queryData.timeList.length>0) {
          var len = queryData.timeList.length;
          for(var i = 0;i<len;i++){
            if(queryData.timeList[i][queryData.timeList[i].name+"Begin"]){
              query[queryData.timeList[i].name+"Begin"] = queryData.timeList[i][queryData.timeList[i].name+"Begin"]
            }
            if(queryData.timeList[i][queryData.timeList[i].name+"End"]){
              query[queryData.timeList[i].name+"End"] = queryData.timeList[i][queryData.timeList[i].name+"End"]
            }
          }
        }
        // 单选/复选
        if (Object.keys(queryData.checked).length > 0) {
          for (var key in queryData.checked) {
            query[key] = queryData.checked[key].split('|')[0]
          }
        }
        // 树-组织结构
        if (queryData.tree.value) {
          query[queryData.tree.key] = queryData.tree.value
        }
        Rest.get(_this.count,query).done(function(res) {
          if (Helper.isSuccess(res)) {
            if(res.data){
              if(res.data.countVo){
                _this.countList = res.data.countVo;
              }else{
                _this.countList = res.data;
              }
              /*与表头匹配，并将值保存在表头列表中，便于页面展示*/
              if(_this.countList.length>0){
                for(var i = 0,tlen = _this.thead.length;i<tlen;i++){
                  _this.thead[i].gridTableCount = null;
                  for(var j = 0,len = _this.countList.length;j<len;j++){
                    if(_this.countList[j].indexName == _this.thead[i].name){
                      _this.thead[i].gridTableCount = _this.countList[j].valueCount;
                    }
                  }
                }
              }else{/*没有数据时，应清空数据*/
                for(var i = 0,tlen = _this.thead.length;i<tlen;i++){
                  _this.thead[i].gridTableCount = null;
                }
              }
            }else{
              _this.countList = []; 
            }
          } else {
            _this.countList = []; 
            _this.$Message.error(res.status.msg);
          }
        })
      }
    },
    // 点击TD
    handleTDClick(e,rowData,thead) {
      e.stopPropagation();
      this.$emit('handleTDClick', rowData,thead)
    },
    // 点击行
    clickRow(e, rowData, index) {
      this.rowClickedIndex = index
      this.$emit('clickRow', rowData, index)
      e.stopPropagation();
    },
    // 流程操作
    operationOne(e, rowData, index) {
        e.stopPropagation();
        //this.rowClickedIndex = index
        this.$emit('operationOne', rowData, index)
    },
    operationTwo(e, rowData, index) {
        e.stopPropagation();
        //this.rowClickedIndex = index
        this.$emit('operationTwo', rowData, index)
    },
		operationThree(e, rowData, index) {
				e.stopPropagation();
				//this.rowClickedIndex = index
				this.$emit('operationThree', rowData, index)
		},
		checkdetail(e, rowData, index) {
				e.stopPropagation();
				//this.rowClickedIndex = index
				this.$emit('checkdetail', rowData, index)
		},
    //针对激励奖金管理加入的操作--更名
    changeName(e, rowData, index) {
    	e.stopPropagation();
    	this.$emit('changeName', rowData, index)
    },
    //针对激励奖金管理加入的操作--提交
    changeSubmit(e, rowData, index) {
    	e.stopPropagation();
    	this.$emit('changeSubmit', rowData, index)
    },
		//删除操作
		deletecurRow(e, rowData, index) {
			e.stopPropagation();
			this.$emit('deletecurRow', rowData, index)
		},
    //针对激励奖金管理加入的操作--撤回
    withdraw(e, rowData, index) {
    	e.stopPropagation();
    	this.$emit('withdraw', rowData, index)
    },
    backurl(e, rowData, index) {
      e.stopPropagation();
      this.$emit('backurl', rowData, index)
    },
    
      processInfo(e, rowData, index) {
        e.stopPropagation();
        this.$emit('processInfo', rowData, index)
    },
    // 筛选之后触发的函数
    filter(queryData) {
      var that = this;
      // 赋值过滤条件
      $(".cp-grid-table").click();
      if (queryData) {
        // 排序
        this.queryData.sort = queryData.sort;
        // 搜索
        this.queryData.search = queryData.search;
        this.queryData.searchList = queryData.searchList;
        // 区间
        this.queryData.range = queryData.range;
        this.queryData.rangeList = queryData.rangeList;
        // 日期
        this.queryData.timepicker = queryData.timepicker;
        this.queryData.timeList = queryData.timeList;
        // 单选/复选
        for (var key in queryData.checked) {
          if (queryData.checked.hasOwnProperty(key)) this.queryData.checked[key] = queryData.checked[key]
        }
        // 组织结构
        if (queryData.tree.value) {
          this.queryData.tree = queryData.tree
        }
        that.nodata_child = "暂无数据"
      }
      // 隐藏所有的高级筛选
      this.thead.forEach(function(th) {
        th.showFilter = false
      });
      // 更新已选的单选/复选的keys列表
      this.checkedKeys = Object.keys(this.queryData.checked);
      // 获取数据
      if (this.pagerData.page === 1) {
        this.getList()
      } else {
        if(_this.isPager){
          _this.$refs.refPager.changePage(1)
        }
      }
    },
    // 调研字典API之后更新字典数据
    setDicObj(option) {
      var _this = this;
      if (option && _this.dicFields.indexOf(option.name) >= 0) {
        _this.dicObjs[option.name] = option.checkbox ? option.checkbox.enumPairs : option.radio.enumPairs
      }
    },
    // 移除已选的高级筛选条件
    removeFilter(type, name) {
      this.nodata_child = this.nodataBackup;
      switch (type) {
        case 'sort': // 排序
          this.queryData.sort = ''
          break
        case 'search': // 搜索
          // this.queryData.search.value = '';
          Bus.$emit("removeFilter_search",name);
          break
        case 'range': // 区间
          // this.queryData.search.value = '';
          Bus.$emit("removeFilter_range",name);
          break
        case 'timepicker': // 日期
          // this.queryData.search.value = '';
          Bus.$emit("removeFilter_timepicker",name);
          break
        case 'checked': // 单选/复选
          delete this.queryData.checked[name]
          this.checkedKeys = Object.keys(this.queryData.checked);
          // 重置单选/复选的值
          this.$refs.filters.forEach(function(filter) {
            filter.reset(name)
          })
          break
        case 'tree':
          this.queryData.tree.value = ''
          this.queryData.tree.name = ''
          this.$refs.filters.forEach(function(filter) {
            filter.reset(name)
          })
          break;
      }
      // 将过滤条件移动回来
      var $target = $('#move-list');
      $target.stop(true).animate({
        marginLeft: 0 + 'px'
      })
      this.getList()
    },
    // 清除所有已选高级筛选条件
    closeFilter() {
      this.queryData = { // 高级搜索查询数据
        sort: '',
        search: {
          value: '',
          name: '',
          displayName: ''
        },
        checked: {},
        tree: {
          key: 'orgIds',
          value: '',
          name: '',
          displayName: ''
        },
        range: {
          name: '',
          displayName: '',
          rangeBegin: 0,
          rangeEnd: 0
        },
        searchList:[],
        rangeList:[],
      };
      // 将过滤条件移动回来
      var $target = $('#move-list');
      $target.stop(true).animate({
        marginLeft: 0 + 'px'
      })
    },
    // 删除选中行
    deleteRow() {
      var _this = this
      var options = this.checkableMap['delete']
      var api = options.api
      var query = options.query
      var alias = options.alias
      var checkedIds = ''
      this.tdata.forEach((item) => {
        if (item.checked) checkedIds += checkedIds ? ',' + item[alias] : item[alias]
      })
      if (checkedIds) {
        Helper.confirm('您确定要删除这些项吗？', function(isOk) {
          if (isOk) {
            var q = {}
            q[query] = checkedIds
            Rest.delete(api, q).done(function(res) {
              if (Helper.isSuccess(res)) {
                Helper.success('删除成功', function() {
                  _this.getList(function() {
                    _this.updateCheckedStats()
                  })
                })
              } else {
                Helper.error(res.status.msg)
              }
            })
          }
        })
      } else {
        Helper.warning('请选择待删除项！');
      }
    },
    // 分页：页码改变
    pageChange(page) {
      this.pagerData.page = page;
      this.getList()
    },
    // 分页：每页条数改变
    rowChange(rows) {
      this.pagerData.rows = rows
      this.getList()
    },
    // 选择页
    selectPage() {
      this.$emit('pageChange')
    },
    // 选择复选框
    checkItem(e, item) {
      var checkedList = [];
      item.checked = !item.checked
      this.updateCheckedStats()
      e.stopPropagation()
      this.tdata.forEach((item) => {
        if (item.checked) checkedList.push(item)
      })
      this.$emit('selection-change', checkedList)
    },
    // 全选
    checkAll(e) {
      var checkedList = [];
      if (this.itemAllChecked) { // 已全选，取消全选
        this.tdata.forEach(function(item) {
          item.checked = false
        })
      } else { // 未全选，全选
        this.tdata.forEach(function(item) {
          item.checked = true
        })
      }
      this.updateCheckedStats()
      e.stopPropagation()
      this.tdata.forEach((item) => {
        if (item.checked) checkedList.push(item)
      })
      this.$emit('selection-change', checkedList)
    },
    // 关闭编辑栏，取消选中
    unCheckAll() {
      if (this.tdata) {
        this.tdata.forEach((item) => {
          item.checked = false
        })
      }
      this.itemAllChecked = false;
      this.updateCheckedStats()
    },
    // 编辑显示字段 - 是否有选中，左右移动icon变色
    hasCheck() {
      var numL = 0;
      var numR = 0;
      for (var i in this.hiddenList) {
        if (this.hiddenList[i].checked) {
          numL++
        }
      }
      for (var i in this.visibleList) {
        if (this.visibleList[i].checked) {
          numR++
        }
      }
      if (numL > 0) {
        this.hasCheck_hiddenList = true;
      } else {
        this.hasCheck_hiddenList = false;
      }
      if (numR > 0) {
        this.hasCheck_visibleList = true;
      } else {
        this.hasCheck_visibleList = false;
      }
    },
    // 编辑显示字段 - 选中项
    check(item) {
      item.checked = !item.checked
      this.hasCheck();
    },
    // 编辑显示字段 - 传输
    transfer(type) {
      var doTrans = function(from, to, data) {
        var uncheckedItems = []
        data[from].forEach(function(item) {
          if (item.checked) {
            item.checked = false
            data[to].push(item)
          } else {
            uncheckedItems.push(item)
          }
        })
        data[from] = uncheckedItems
      }
      switch (type) {
        case 1: // 从右到左
          doTrans('visibleList', 'hiddenList', this);
          this.hasCheck_visibleList = false;
          break
        case 2: // 从左到右
          doTrans('hiddenList', 'visibleList', this);
          this.hasCheck_hiddenList = false;
          break
      }
    },
    // 编辑显示字段 - 排序
    sort(type) { // type: 1 向上，2 向下
      var move = function(type, i, arr, data) {
        var limit
        var distIndex
        var distItem
        switch (type) {
          case 1:
            limit = 0
            distIndex = i - 1
            break
          case 2:
            limit = arr.length - 1
            distIndex = i + 1
            break
        }
        if (i == limit) return false
        distItem = arr[distIndex]
        data.$set(arr, distIndex, arr[i])
        data.$set(arr, i, distItem)
      }
      if (type === 1) {
        for (var i = 0, len = this.visibleList.length; i < len; i++) {
          if (this.visibleList[i].checked) move(type, i, this.visibleList, this)
        }
      } else if (type === 2) {
        for (var i = this.visibleList.length - 1; i >= 0; i--) {
          if (this.visibleList[i].checked) move(type, i, this.visibleList, this)
        }
      } else {
        console.error('Error: sort(type): type类型不正确')
        return false
      }
    },
    // 拖拽
    dragstart(ev) {
      ev.dataTransfer.setData('text', ev.target.getAttribute('transdata'))
      ev.effectAllowed = 'move'
    },
    // 拖拽
    dragend(ev) {
      ev.dataTransfer.clearData()
    },
    // 拖拽
    dragover(ev) {
      var nodeName = ev.target.nodeName.toUpperCase()
      switch (nodeName) {
        case 'DIV':
          this.dropTargetIndex = '$'
          $('.dragover').removeClass('dragover')
          break
        case 'UL':
          this.dropTargetIndex = '$'
          $('.dragover').removeClass('dragover')
          break
        case 'LI':
          this.dropTargetIndex = ev.target.getAttribute('transdata').split('|')[1]
          $(ev.target).addClass('dragover').siblings().removeClass('dragover')
          break
        case 'LABEL':
          this.dropTargetIndex = ev.target.parentNode.getAttribute('transdata').split('|')[1]
          $(ev.target.parentNode).addClass('dragover').siblings().removeClass('dragover')
          break
        case 'I':
          this.dropTargetIndex = ev.target.parentNode.getAttribute('transdata').split('|')[1]
          $(ev.target.parentNode).addClass('dragover').siblings().removeClass('dragover')
          break
        default:
          this.dropTargetIndex = '$'
          break
      }
      ev.preventDefault()
    },
    // 拖拽
    drop(ev) {
      var transdata = ev.dataTransfer.getData('text')
      var listName = transdata.split('|')[0]
      var index = transdata.split('|')[1]
      var item = this[listName][index]
      var dropTargetName = ev.currentTarget.id
      if (listName !== dropTargetName) {
        if (this.dropTargetIndex === '$') {
          this[dropTargetName].push(item)
        } else if (this.dropTargetIndex === '0') {
          this[dropTargetName].unshift(item)
        } else {
          this[dropTargetName].splice(this.dropTargetIndex, 0, item)
        }
        this[listName].splice(index, 1)
      } else {
        if (this.dropTargetIndex === '$') this.dropTargetIndex = this[dropTargetName].length - 1
        var fromItem = this[dropTargetName].splice(index, 1)[0]
        this[dropTargetName].splice(this.dropTargetIndex, 0, fromItem)
      }
      $('.dragover').removeClass('dragover');
      this.hasCheck();
    },
    // 修改表头
    updateTHeadVisible(visible, callback) {
      var that = this;
      var restApi = Api.tbQeury.updateCustom;
      var parms = {};
      var list = visible ? that.visibleList : that.hiddenList
      if (list.length > 0) {
        var tableQueryDefIds = list.map(item => item.id).join(',')
        parms = {
          "defName": that.defName,
          "tableQueryDefIds": tableQueryDefIds,
          // "visible": visible
        };
        Rest.put(restApi, null, parms).done(function(res) {
          if (Helper.isSuccess(res)) {
            if (typeof callback) callback()
          } else {
            Helper.error(res.status.msg)
          }
        })
      } else {
        if (typeof callback) callback()
      }
    },
    // 保存设置
    saveSetting() {
      var that = this;
      if(that.visibleList && that.visibleList.length>0){
        that.updateTHeadVisible(true, function() {
          Helper.success('保存成功', function() {
            that.hasCheck_hiddenList = false;
            that.hasCheck_visibleList = false;
            that.showSetting = false
            that.init()
          })
        });
      }else{
        that.showSetting = true;
        Helper.warning('列表项至少保留一个！')
      }
    },
    // 取消保存设置
    cancelSetting() {
      this.initTHeadGroup();
      this.hasCheck_hiddenList = false;
      this.hasCheck_visibleList = false;
      this.showSetting = false;
    },
    // 初始化表头配置列表
    initTHeadGroup() {
      var _this = this
      Rest.get(this.theadSource + this.defName).done(function(res) {
        if (Helper.isSuccess(res)) {
          // 初始化表头配置列表
          _this.visibleList = []
          _this.hiddenList = []
          if (res.data.properties) {
            res.data.properties.forEach(function(item) {
              if(!item.hide){
                // 初始化隐藏/显示选项列表
                var listName = item.visible ? 'visibleList' : 'hiddenList'
                _this[listName].push({
                  name: item.name,
                  displayName: item.displayName,
                  checked: false
                })
              }
            })
          }
        } else {
          Helper.toast(res.status.msg)
        }
      })
    },
    // 更新选中状态
    updateCheckedStats() {
      var _this = this
      _this.checkedItemCount = 0
      if (this.tdata && this.tdata.length > 0) {
        this.itemAllChecked = this.tdata.every(item => item.checked)
        this.hasItemChecked = this.tdata.some(item => item.checked)
        this.tdata.forEach((item) => {
          if (item.checked) _this.checkedItemCount++
        })
      } else {
        this.itemAllChecked = false;
        this.hasItemChecked = false;
        this.checkedItemCount = 0;
      }
      this.showOperation = this.itemAllChecked || this.hasItemChecked
      if(this.showOperation){
        _this.topShow = false;
        setTimeout(()=>{
          _this.topShow2 = true;
        },50)
      }else{
        _this.topShow2 = false;
        setTimeout(()=>{
          _this.topShow = true;
        },50)
      }
    },
    // 表格体内容的过滤
    getTdNumber(val, name) {
      var _this = this;
      if (_this.dicFields.indexOf(name) >= 0) {
        var d = _this.dicObjs[name] || '';
        for (var i = 0, len = d.length; i < len; i++) {
          if (d[i].id == val) {
            val = d[i].name;
            break;
          }
        }
      }
      return val;
    },
    // 表格体内容的过滤
    getTdString(val, name) {
      var _this = this;
      if (_this.dicFields.indexOf(name) >= 0) {
        var d = _this.dicObjs[name] || '';
        for (var i = 0, len = d.length; i < len; i++) {
          if (d[i].id == val) {
            val = d[i].name;
            break;
          }
        }
      }
      return val;
    },
    // 表格体内容的过滤
    getTdArray(val, name) {
      var _this = this;
      return val.map(function(value) {
        if (_this.dicFields.indexOf(name) >= 0) {
          var d = _this.dicObjs[name] || '';
          for (var i = 0, len = d.length; i < len; i++) {
            if (d[i].id == value) {
              value = d[i].name;
              break;
            }
          }
        }
        return value;
      }).join('/')
    },
    getTdObject(val, dataType) {
      if (val) {
        return val.name;
      }
      if (dataType == '3') {
        return 0
      }
      return val
    },
    getRangTitle(begin,end){
      // {{item[item.name+'Begin']?item[item.name+'Begin']:0}}{{item[item.name+'End']?'~'+item[item.name+'End']:'到~'}}
      var val = "";
      if((begin || begin == 0) || (end == 0)){
        if(begin == 0 || !begin){
          begin = '0';
        }
        if(end || end == 0){
          end = "~"+end;
        }else{
          end = "到~";
        }
        val = begin + '' + end;
      }
      return val;
    }
  },
  created() {
    //this.init();
  },
  activated() {

  },
  components: {
    gridFilter
  },
  props: {
    title: { // 表格标题
      type: String,
      default: ''
    },
    nodata: {
      type: String, // 表格无数据时显示的字符串
      default: '暂无数据~'
    },
    defName: { // 表格头数据源参数defName: GET api/v1/tb_query_defs/{defName} 获取查询定义
      type: String
    },
    theadparms: {
      type: Array,
      default: function() {
        return []
      }
    },
    tdataSource: { // 数据url
      type: String,
    },
    checkable: { // 每一列是否可选
      type: String,
      default: ''
    },
    filterable: {
      type: Boolean,
      default: false
    },
    hasCheckbox: { // 是否展示多选框
      type: Boolean,
      default: false
    },
    setting: { // 是否展示表头设置
      type: Boolean,
      default: true
    },
    total: { //外部表头接口
      type: String,
      default: ''
    },
    count: { //合计接口
      type: String,
      default: ''
    },
      countShow:{
          type: Boolean,
          default: true
      },
    countTitle: { //合计标题
      type: String,
      default: '合计值'
    },
    countFormart: {
      type: String,
      default: 'moneyFormart'
    },
    seachMaxlength: {
      type: Number,
      default: 10
    },
    isFirstLoad: {
      type: Boolean,
      default: true
    },
    clickTD: { // 用来判断是否需要单个TD点击，如果clickTD存在，行点击就消失
      type: Boolean,
      default: false
    },
    operation: {
      type: Boolean,
      default: false
    },
    BonusOperation: {
      type: Boolean,
      default: false
    },
		appendixOperation: {
			type: Boolean,
			default: false
		},
    tdataKey: {
      type: Boolean,
      default: false
    },
    nocursor: {
      type: Boolean,
      default: false
    },
    tableOnly: {
      type: Boolean,
      default: false
    },
    isPager: { //是否分页
      type: Boolean,
      default: true
    },
    dataKey: { //用来根据数据类型进行数据处理
      type: String,
      default: "item"
    },
    isChangeData: { // 数据是否需要转化
      type: Boolean,
      default: false
    },
    isEnocde: {
      type: Boolean,
      default: true
    },
    /*
      修改表头字段 例：
      that.changeThead = 
        { 
          'exclusiveSalePrice': { 'hide':false }, 
          'exclusiveSalePrice': { 'hide':false }, 
          'exclusiveSalePrice': { 'hide':false } 
        }
    */
    changeThead:{
      type: Object,
      default: function() {
        return {}
      }
    },
    processOperation: {
        type: Boolean,
        default: false,
    },
		processOperationes: {
				type: Boolean,
				default: false,
		},
    operationcaozuo:{
        type: Boolean,
        default: false,
    },
      productIntention: {
          //type: Number,
          default: '',
      },
			userIncon:{//列表中是否显示用户图标
        type:Boolean,
        default:false
      },
      hasNext: {
          type: Boolean,
          default: true,
      },
			hasPromess: {
					type: Boolean,
					default: true,
			},
      isLeaveMessage: {
          type: Boolean,
          default: false,
      },
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/sass/install";
.cp-grid-table {
  position: fixed;
  left: 220px;
  right: 0;
  top: 50px;
  bottom: 0;
  .topShowWarp{
    position: relative;
    z-index: 10;
    height: 50px;
    min-width: 1050px;
    background-color: #f3f3f3;
    border-bottom: 1px solid #bebebe;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  .isLeaveMessage span{
    color: #02b0f0;
  }
  .userIcon{
    width:18px;
    height:20px;
    position: relative;
    top:5px;
  }
  .wedgets {
    display: flex;
    flex-direction: row;
    align-items: center;
    .heading {
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      color: #333333;
      flex-shrink: 0;
      .titleHandle {
        display: inline-block;
      }
    }
    .grid-selected-conditions {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-left: 10px;
      padding-top: 1px;
      .tip {
        background-color: white;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border: 1px solid $borderColor;
        color: #8fa1b1;
        cursor: pointer;
        @include radius(3px);
        &.filter-sort {
          flex-shrink: 0;
        }
        .highlight {
          color: $blue;
          max-width: 120px;
          display: inline-block;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .x {
          width: 11px;
          height: 11px;
          display: inline-block;
          background: url(./images/x.png) no-repeat 0 0;
          margin-left: 10px;
        }
      }
      .move-panel {
        max-width: 400px;
        width: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-left: 10px;
        .m-l {
          width: 27px;
          height: 11px;
          display: inline-block;
          margin-right: 10px;
          background: url(./images/m-l.png) no-repeat 0 0;
          cursor: pointer;
        }
        .m-r {
          width: 27px;
          height: 11px;
          display: inline-block;
          background: url(./images/m-r.png) no-repeat 0 0;
          cursor: pointer;
          margin-right: 10px;
          z-index: 30;
        }
        .tips {
          max-width: 660px;
          overflow: hidden;
          margin-right: 10px;
          ul {
            width: 2000px;
            li {
              display: inline-block;
              margin-right: 5px;
            }
          }
        }
      }
    }
    .grid-wedget-left-button {
      height: 50px;
      line-height: 50px;
      text-align: left;
      float: left;
      padding: 0;
      padding-top: 1px;
      &:after {
        content: '';
        display: block;
        clear: both;
      }
    }
    .grid-wedget-button {
      margin-right: 20px;
      width: auto;
      &:after {
        content: '';
        display: block;
        clear: both;
      }
      button {
        vertical-align: middle;
        float: left;
        &:nth-child(2) {
          border-top-right-radius: 0px;
          border-bottom-right-radius: 0px;
          margin-left: 5px;
        }
      }
      .more-button {
        width: 30px;
        height: 30px;
        vertical-align: middle;
        background-color: #00cc66;
        position: relative;
        float: left;
        display: inline-block;
        text-align: center;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-left: 1px solid #1ca43f;
        cursor: pointer;
        line-height: 28px;
        &:before {
          content: '';
          display: inline-block;
          width: 9px;
          height: 5px;
          background: url(./images/arrow-down.png) no-repeat 0 0;
        }
        &.active {
          background-color: #1ca43f;
          &:before {
            background-position: -73px -476px;
          }
        }
      }
      .more-button-list {
        position: absolute;
        right: 0;
        top: 30px;
        z-index: 5;
        background-color: white;
        box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .2);
        @include radius(5px);
        width: auto;
        li {
          white-space: nowrap;
          padding: 0 20px;
          height: 35px;
          line-height: 35px;
          text-align: center;
        }
      }
    }
  }
  .operation {
    @extend .wedgets;
    height: 50px;
    ul {
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: -2px;
      margin-right: 3px;
      width: 600px;
      li {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-right: 1px solid $borderColor;
        &:last-child {
          border-right: none;
        }
        &.text {
          flex-basis: 80px;
          .highlight {
            color: $blue;
            margin: 0 2px;
          }
        }
        &.op-btn {
          color: #a4a4a4;
          cursor: pointer;
          &:before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
        }
        &.op-btn-delete {
          &:before {
            background: url(./images/delete.png) no-repeat 0 0;
          }
          &:hover {
            color: $blue;
            &:before {
              background: url(./images/delete-active.png) no-repeat 0 0;
            }
          }
        }
      }
    }
    .op-btn-cancel {
      height: 50px;
      line-height: 53px;
      text-align: center;
      width: 50px;
      border-left: 1px solid $borderColor;
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
      @include transition(500ms);
      &:hover{
        background-color: #e3e3e3;
        height: 49px;
      };
      &:before {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(./images/cancel.png) no-repeat 0 0;
      }
    }
  }
  .grid-table {
    position: absolute;
    top: 70px;
    right: 20px;
    left: 20px;
    bottom: 78px;
    border-left: 1px solid $thBorderColor;
    border-right: 1px solid $thBorderColor;
    border-top: 1px solid $thBorderColor;
    border-bottom: 1px solid $tdBorderColor;
    @include overflowCss();
    overflow-x: auto;
    overflow-y: hidden;
    .grid-table-container {
      background-color: white;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0px;
      padding-top: 48px;
      min-width: 1020px;
      .checkboxWarp {
        min-width: 100px;
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        color: #8c8b8b;
      }
      .processOperation{
        min-width: 210px;
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        color: #8c8b8b;
        .step{
          color:#02b0f0;
            margin-right:10px;
        }
      }
    }
    .grid-thead {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 1;
      &:hover{
        .ivu-col {
          .grid-filter-container {
            display: inline-block;
          }
        }
      }
      .ivu-col {
        height: 40px;
        line-height: 40px;
        background-color: $thBG;
        border-bottom: 1px solid $thBorderColor;
        text-align: left;
        cursor: pointer;
        padding-left: 13px;
        &.last-child {         
          border-left: 1px solid $thBorderColor;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .grid-filter-container {
          display: inline-block;
          padding: 0 8px; 
        }
        .setting {
          display: inline-block;
          width: 21px;
          height: 21px;
          background: url(./images/setting.png) no-repeat 0 0;
        }
        .index {
          color: #666666;
          font-weight: bold;
        }
        .grid-table-th {
          height: 100%;
          position: relative;
          .column-title {
            display: inline-block;
            vertical-align: top;
            color: #666666;
            font-weight: bold;
            max-width: calc(100% - 52px);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            &.noSearchable{
              max-width: 100%;
            }
          }
        }
      }
      .grid-flex-col {
        flex-grow: 1;
      }
      .checkboxWarp {
        background-color: #f5f5f5;
        border-bottom: 1px solid #d5d5d5;
        font-weight: bold;
        color: #666666;
      }
    }
    .grid-tdata {
      overflow-y: scroll;
      position: absolute;
      left: 0;
      right: 0;
      top: 40px;
      bottom: 0;
      background: url(./images/grid-bg.png) repeat 0 0;
      background-size: 1px 41px;
      .grid-row {
        background-color: white;
        border-bottom: 1px solid $tdBorderColor;
        @include transition(500ms,background-color);
        cursor: pointer;
        &.active {
          background-color: $tdBorderColor;
        }
        &:last-child {
          border-bottom: none;
        }
        &:hover {
          background-color: $tdBorderColor;
        }
        .grid-flex-col_hover {
          color: #02b0f0;
          .grid-flex-col_div{
            display: flex;
            cursor: pointer;
            height: 40px;
            align-items:center;
          }
        }
        .tip_icon{
          display: inline-block;
          vertical-align: middle;
          margin-top: 1px;
          width: 18px;
          height: 20px;
          background: url(../../assets/images/icons.png) no-repeat -461px -1045px;
        }
      }
      .grid-row_nocursor{
        cursor: default;
      }
      .ivu-col {
        height: 40px;
        padding-left: 13px;
        color: #8c8b8b;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .grid-flex-col_div{
          max-width: 100%;
          height: 40px;
          line-height: 40px;
        }
        span {
          display: inline-block;
          vertical-align: middle;
          max-width: 100%;
          padding-right: 10px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          height: 40px;
          line-height: 40px;
        }
      }
      .grid-flex-col {
        flex-grow: 1;
        overflow: hidden;
      }

      @include overflowCss();
    }
    .w10 {
      width: 10px;
      height: 40px;
      background-color: #f5f5f5;
      border-bottom: 1px solid #d5d5d5;
    }
    .b89 {
      bottom: 40px;
    }
    .gridTablenodata {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: #8f8f8f;
      .alert {
        text-align: center;
        position: fixed;
        width: 240px;
        left: 50%;
        top: 50%;
        margin-left: -10px;
        margin-top: -50px;
        i {
          display: block;
          width: 78px;
          height: 78px;
          background: url(./../../assets/images/customer_icons.png) no-repeat  -142px -492px;
          margin: 0 auto;
          margin-bottom: 5px;
        }
      }
    }
  }
  .grid-table-hasOperation{
    top: 120px;
  }
  .loadingwarp {
    position: absolute;
    width: 100%;
    bottom: 80px;
    top: 70px;
    z-index: 300;
    .gridTableloading {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -100px;
      margin-top: -120px;
      height: 200px;
      width: 200px;
    }
  }
  .checkbox {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    cursor: pointer;
    @include radius(3px);
  }
  .checkbox-checked {
    border: 1px solid $blue;
    background: $blue url(./images/checkbox-checked.png) no-repeat center center;
    background-size: 86% auto;
  }
  .checkbox-part-checked {
    &:after {
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      background-color: $blue;
      margin: 3px 0 0 3px;
      @include radius(2px);
    }
  }
  .grid-tCout {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #e2f7ff;
    border-top: 1px solid #ddd;
    .ivu-col {
      padding-left: 13px;
      color: #8c8b8b;
      font-weight: 600;
      .col-span{
        display: inline-block;
        max-width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
      }
    }
    .grid-flex-col {
      flex-grow: 1;
    }
    .w10 {
      background-color: #e2f7ff
    }
  }
  .grid-tfoot {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 30px;
    height: 49px;
    .ivu-row {
      border: 1px solid $thBorderColor;
      padding: 11px 15px 5px 15px;
      background-color: #fff;
    }
    .clear{
      display: inline-block;
      height: 32px;
      line-height: 32px;
    }
    .totalCount {
      position: fixed;
      height: 32px;
      line-height: 32px;
      display: inline-block;
      vertical-align: top;
      color: #657180;
    }
    .pager {
      display: inline-block;
      vertical-align: top;
      position: absolute;
      right: 20px;
      background-color: #fff;
      padding-left: 50px;
    }
  }
  .grid-wedget-operation{
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    min-width: 1050px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);*/
    padding: 0 20px;
  }
}
.grid-setting {
  .inner {
    /*width: 728px;*/
    background-color: white;
    @include radius(5px);
    overflow: hidden;
    .heading {
      height: 44px;
      line-height: 44px;
      border-bottom: 1px solid #d5d5d5;
      background-color: #f5f5f5;
      padding: 0 19px;
      label {
        color: #666666;
      }
      .x {
        display: inline-block;
        width: 13px;
        height: 13px;
        background: url(./images/x13.png) no-repeat 0 0;
        float: right;
        margin-top: 17px;
        cursor: pointer;
      }
    }
    .bd {
      /*padding: 28px 0 28px 65px;*/
      padding: 28px 0 28px 57px;
      &:after {
        content: '';
        display: block;
        clear: both;
      }
      .list-left,
      .list-right {
        float: left;
        text-align: left;
        h3 {
          font-size: 14px;
          color: #92979e;
          font-weight: normal;
          height: 33px;
          line-height: 33px;
        }
        .items {
          width: 243px;
          height: 377px;
          border: 1px solid $borderColor;
          @include radius(5px);
          overflow: hidden;
          @include overflowCss();
          &:hover{
            overflow: auto;
          };
          ul {
            padding-bottom: 12px;
            li {
              padding-top: 12px;
              padding-left: 14px;
              &.dragover {
                padding-top: 40px;
              }
              i {
                vertical-align: middle;
                margin-right: 8px;
              }
              label {
                vertical-align: middle;
              }
            }
          }
        }
      }
      .mid {
        width: 40px;
        height: 410px;
        float: left;
        margin: 0 20px;
        .to-l {
          display: block;
          width: 40px;
          height: 40px;
          background: url(./images/trans-btn.png) no-repeat 0 0;
          cursor: pointer;
          margin-top: 170px;
          margin-bottom: 22px;
        }
        .to-r {
          display: block;
          width: 40px;
          height: 40px;
          background: url(./images/trans-btn.png) no-repeat 0 0;
          @include rotate(180deg);
          cursor: pointer;
          &:hover {}
        }
        .to-hover {
          background-image: url(./images/trans-btn-active.png);
        }
      }
      .sort {
        width: 30px;
        height: 410px;
        float: left;
        margin-left: 12px;
        .up {
          display: block;
          width: 30px;
          height: 30px;
          background: #ebf0f1 url(./images/trans-arrow.png) no-repeat center center;
          margin-bottom: 5px;
          margin-top: 33px;
          cursor: pointer;
        }
        .down {
          display: block;
          width: 30px;
          height: 30px;
          background: #ebf0f1 url(./images/trans-arrow.png) no-repeat center center;
          @include rotate(180deg);
          cursor: pointer;
        }
      }
    }
    .bt {
      text-align: center;
      border-top: 1px solid $borderColor;
      padding: 9px 0;
      button {
        font-size: 14px;
      }
    }
  }
}
.gridTableDemo-spin-col {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  text-align: center;
  height: 100px;
  margin-left: -100px;
  margin-top: -50px;
  box-shadow: 0 0 8px #ddd;
  border-radius: 3px;
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>
